<script lang="ts" setup>
  import { TableOptions } from '@/types/dataTable'
  import { onMounted, reactive, ref } from 'vue'
  import { useParamsListQuery } from '@/hooks/paramsListQuery'
  import { Bell, Search, Delete, Edit, Plus, Download, Upload } from '@element-plus/icons-vue'
  import { useUserStore } from '@/store/modules/user'
  import { useUserInfo } from '@/hooks/userInfo'
  import FormAdd from './form.vue'
  const pagingTable = ref() // 用于获取表格实例
  const formAddRef = ref() // 用于获取添加表单实例
  const { listQuery } = useParamsListQuery()
  const userStore = useUserStore()
  const { getMaskedPhone, getUserPermissions } = useUserInfo()
  // 复制手机号
  import clip from '@/utils/clipboard'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { updateUserInfoService } from '@/api/user'
  const handleCopy = (text: string, event: MouseEvent) => {
    clip(text, event)
  }

  const options = reactive<TableOptions>({
    add: {
      enable: false,
      permission: '',
    },
    edit: {
      enable: false,
      permission: '',
    },
    delete: {
      enable: true,
      permission: '',
      url: '/instructor/deleteInstructor',
      tip: '账号注册48小时内且该账号未登录系统才能删除！',
    },
    listUrl: '/instructor/getAllInstructor', // 列表请求URL
  })
  // 修改账号状态
  const changeStatus = (row) => {
    ElMessageBox.confirm(`确定要${!row.status ? '禁用' : '启用'} ${row.name} 的账号吗？`, '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(async () => {
        await updateUserInfoService(row)
        ElMessage({
          type: 'success',
          message: `${!row.status ? '禁用' : '启用'}成功`,
        })
      })
      .catch(() => {
        row.status = 1 - row.status
      })
  }

  // 增加用户的逻辑
  const refreshList = () => {
    pagingTable.value?.getList()
  }
  const openDialog = () => {
    formAddRef.value?.show()
  }
  onMounted(() => {
    const Leavel = userStore.userInfo?.permissionLevel || null
    if (Leavel) {
      listQuery.value.params.deparmentId = userStore.userInfo?.departmentId || ''
    }
  })
</script>
<template>
  <div class="app-container">
    <div class="table-inner">
      <tree v-model="listQuery.params.departmentId" :params="listQuery.params"> </tree>
      <data-table ref="pagingTable" v-model:list-query="listQuery" :options="options" @add="openDialog">
        <template #filter-content>
          <el-input
            id="search-keyword"
            v-model.trim="listQuery.params.keyword"
            :prefix-icon="Search"
            style="width: 200px"
            placeholder="名称/工号"
            class="filter-item"
          />
          <el-button :icon="Upload" type="primary"> 导入 </el-button>
          <el-button :icon="Download" type="warning"> 导出 </el-button>
        </template>
        <template #data-columns>
          <el-table-column type="selection" width="55" />
          <el-table-column show-overflow-tooltip align="center" prop="name" label="姓名" width="100">
            <template #default="scope">
              <DetailLink :title="scope.row.name" permission="" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="permissionLevel" label="身份" width="120">
            <template #default="scope">
              <el-tag v-if="scope.row.permissionLevel === 0" type="warning">
                {{ getUserPermissions(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.permissionLevel === 1" type="primary">
                {{ getUserPermissions(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.permissionLevel === 2" type="info">
                {{ getUserPermissions(scope.row) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip align="center" prop="employeeNumber" label="工号" />
          <el-table-column align="center" label="电话" width="150">
            <template #default="scope">
              <el-tooltip class="box-item" effect="dark" content="点击复制电话号" placement="top">
                <div style="cursor: pointer" @click="handleCopy(scope.row.phone, $event)">
                  {{ getMaskedPhone(scope.row.phone) }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip align="center" prop="department" label="部门" />
          <el-table-column show-overflow-tooltip align="center" prop="positional" label="职称" width="100" />
          <el-table-column align="center" prop="gender" label="性别" width="100">
            <template #default="scope">
              {{ scope.row.gender === 1 ? '男' : '女' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="账号状态" width="100">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                inline-prompt
                active-text="启用"
                inactive-text="禁用"
                :active-value="1"
                :inactive-value="0"
                @change="changeStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="160">
            <template #default="scope">
              <el-link class="tool" type="primary" size="small" style="margin-right: 8px">
                <el-icon style="margin-right: 4px"><ChromeFilled /></el-icon>权限</el-link
              >
              <el-link class="tool" type="primary" size="small">
                <el-icon style="margin-right: 4px"><User /></el-icon>详细</el-link
              >
            </template>
          </el-table-column>
        </template>
      </data-table>
    </div>
    <form-add ref="formAddRef" @refresh-list="refreshList"> </form-add>
  </div>
</template>
<style lang="scss" scoped>
  .table-inner {
    display: flex;
    gap: 20px;
  }
</style>
